<template>
  <section style="padding-bottom: 30px;height: 100%;">
    <div style="position: relative;text-align: left;padding: .3rem;">
      <yd-button type="primary" @click.native="getPdfBtn()" style="width: 80px;height: 30px;background: #62b900;">下载报告</yd-button>
    </div>

    <div id="pdfDom">
      <div style="padding: 40px 20px;overflow: auto;">
      <p style="font-size: 26px;text-align: center;">火炬数据风险审核报告</p>
      <div class="ru_t">
        <p>
          <span>报告编号</span>
          <span>{{r_out_trade_no}}</span>
        </p>
        <p>
          <span>报告生成时间</span>
          <span>{{rtime}}</span>
        </p>
        <p>
          <span>风险扫描</span>
          <span style="color: red;">共发现{{rcount}}条异常信息</span>
        </p>
      </div>
      <p class="r_tit">用户基本信息</p>
      <ul class="r_ul">
        <li style="margin-top: 18px;">
          <span>姓名</span>
          <span>{{rname}}</span>
        </li>
        <li>
          <span>性别</span>
          <span>{{rsex}}</span>
        </li>
        <li>
          <span>年龄</span>
          <span>{{rage}}</span>
        </li>
        <li>
          <span>出生日期</span>
          <span>{{rbirth}}</span>
        </li>
        <li>
          <span>身份证号</span>
          <span>{{rcode}}</span>
        </li>
        <li>
          <span>籍贯</span>
          <span>{{rcity}}</span>
        </li>
        <li>
          <span>手机号</span>
          <span>{{rphone}}</span>
        </li>
        <li>
          <span>手机号运营商</span>
          <span>{{risp}}</span>
        </li>
        <li>
          <span>手机号归属地</span>
          <span>{{raddress}}</span>
        </li>
        <img :src="rphoto" class="r_head">
      </ul>

      <p class="r_tit" style="margin-top: 30px">检测结果</p>
      <table style="width: 800px;" cellspacing="0">
        <thead>
        <th style="width: 34%">检测项</th>
        <th style="width: 18%">检测结果</th>
        <th style="width: 48%">风险详情</th>
        </thead>
        <tbody>
        <tr v-for="(item,index) in listInfo" :key="index">
          <td style="text-align: left;padding-left: 60px;">{{item.one}}</td>
          <td v-if="item.two=='命中'" style="color: red;">{{item.two}}</td>
          <td v-else>{{item.two}}</td>
          <td><pre  v-html="item.three"></pre></td>
        </tr>
        </tbody>
      </table>
    </div>
    </div>
  </section>
</template>

<script>
    export default {
        name: "riskComResult",
        data(){
          return{
            htmlTitle:'风险审核报告',
            listInfo:[],
            rname:'',
            rsex:'',
            rage:'',
            rbirth:'',
            rcode:'',
            rcity:'',
            rphone:'',
            r_out_trade_no:'',
            rtime:'',
            rcount:'',
            rphoto:require('../../assets/mine/no_pic.png'),
            risp:'',
            raddress:'',
          }
        },
      methods:{
        getPdfBtn(){
          const that = this;
          var ua = navigator.userAgent.toLowerCase();
            that.$dialog.loading.open('正在获取下载链接');
            this.getPdf().then(function (result) {
              that.$ajax.post(window.g.apiUrl+'/file/getPdf.do',JSON.stringify({
                file:result,
                code:that.r_out_trade_no,
              })).then((response) => {
                that.$dialog.loading.close();
                if(response.data.code == 200 && response.data.data != ''){
                  if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) && ua.indexOf('micromessenger')!= -1) {
                    sessionStorage.setItem('PNGURL', response.data.data);
                    that.$router.push('/ios_detail');
                  }else{
                    window.location.href = response.data.data;
                  }
                }else{
                  that.$dialog.notify({
                    mes:'下载失败，请稍后重试',
                    timeout: 1500,
                  });
                }
              })
            })
        }
      },
      created(){
        let RESULTINFO = JSON.parse(sessionStorage.getItem('TO_OBJECT'));
        this.rname = RESULTINFO.userInfo.name;
        this.rsex = RESULTINFO.userInfo.sex;
        this.rage = RESULTINFO.userInfo.age;
        this.rbirth = RESULTINFO.userInfo.birth;
        this.rcode = RESULTINFO.userInfo.idCard;
        this.rcity = RESULTINFO.userInfo.city;
        this.rphone = RESULTINFO.userInfo.mobile;
        this.r_out_trade_no = RESULTINFO.userInfo.out_trade_no;
        this.rtime = RESULTINFO.userInfo.time;
        this.rcount = RESULTINFO.userInfo.count;
        this.risp = RESULTINFO.userInfo.isp == ''?'未知':RESULTINFO.userInfo.isp;
        this.raddress = RESULTINFO.userInfo.attribution == ''?'未知':RESULTINFO.userInfo.attribution;
        if(RESULTINFO.userInfo.photo == '' || RESULTINFO.userInfo.photo == undefined){
          this.rphoto = require('../../assets/mine/no_pic.png');
        }else{
          this.rphoto = 'data:image/jpg;base64,'+RESULTINFO.userInfo.photo;
        }
        this.listInfo = RESULTINFO.infoList;
      }
    }
</script>

<style scoped>
  p{
    font-size: .28rem;
  }
  .ru_t{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ru_t p{
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 30px;
  }
  .ru_t p>span{
    margin-bottom: 10px;
  }
  .r_head{
    position: absolute;
    right: 0;
    top: 0;
    width: 150px;
    height: 187px;
  }
  .r_tit{
    width: 100%;
    background: #E72A26;
    color: #fff;
    text-align: left;
    padding:5px 0 5px 20px;
    -webkit-text-size-adjust:none;
  }
  th,td{
    border:solid #f2f2f2;
    padding: 8px 0;
    border-width:0px 1px 1px 0px;
  }
  table{
    border-left: 1px solid #f2f2f2;
  }
  pre{
    display: flex;
    justify-content: center;
    text-align: left;
    font-family: inherit;
    white-space: pre-wrap;
    padding: 0 5px;
    flex-flow: column;
    align-items: center;
  }
  .r_ul{
    border: 1px solid #f2f2f2;
    position: relative;
  }
  .r_ul li{
    list-style: none;
    display: flex;
    margin-bottom: 18px;
    width: 400px;
    padding-left: 20px;
  }

  .r_ul li span:nth-child(1) {
    width: 200px;
    text-align: left;
  }
  #pdfDom{
    width: 840px;
    background-image: url("../../assets/credit/bg2.jpg");
    background-size: 100% auto;
  }
</style>
